<!DOCTYPE html>
<html>
<head>
<link href='../../dist/fullcalendar.css' rel='stylesheet' />
<link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../../node_modules/jquery/dist/jquery.js'></script>
<script src='../../node_modules/moment/moment.js'></script>
<script src='../../dist/fullcalendar.js'></script>
<script src='../../dist/gcal.js'></script>
<script>

	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();

	var verbose = false;

	$(document).ready(function() {
		$('#calendar').fullCalendar({
			
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
			},
			editable: true,
			selectable: true,

			viewRender: function(view, element) {
				console.log('viewRender');
				//alert('viewRender');
				if (verbose) {
					console.log(' this', this);
					console.log(' view', view);
					console.log(' element', element);
				}
			},

			eventAfterAllRender: function(view) {
				console.log('eventAfterAllRender');
				if (verbose) {
					console.log(' this', this);
					console.log(' view', view);
				}
			},

			viewDestroy: function(view, element) {
				console.log('viewDestroy');
				//alert('viewDestroy');
				if (verbose) {
					console.log(' this', this);
					console.log(' view', view);
					console.log(' element', element);
				}
			},

			eventDestroy: function(event, element) {
				console.log('eventDestroy');
				//alert('eventDestroy');
				if (verbose) {
					console.log(' this', this);
					console.log(' event', event);
					console.log(' element', element);
				}
			},

			/*

			viewDisplay: function(view) { // deprecated
				console.log('viewDisplay');
				if (verbose) {
					console.log('The new title of the view is ' + view.title);
				}
			},

			*/
			
			eventSources: [
				{
					url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
					editable: true,
					className: 'holiday'
				},
				{
					events: [
						{
							title: 'All Day Event',
							start: new Date(y, m, 1)
						},
						{
							title: 'Long Event',
							start: new Date(y, m, d-5),
							end: new Date(y, m, d-2)
						},
						{
							id: 999,
							title: 'Repeating Event',
							start: new Date(y, m, d-3, 16, 0),
							allDay: false
						},
						{
							id: 999,
							title: 'Repeating Event',
							start: new Date(y, m, d+4, 16, 0),
							allDay: false
						},
						{
							id: 888,
							title: 'Meeting',
							start: new Date(y, m, d, 10, 30),
							allDay: false
						},
						{
							id: 777,
							title: 'Lunch',
							start: new Date(y, m, d, 12, 0),
							end: new Date(y, m, d, 14, 0),
							allDay: false
						},
						{
							title: 'Birthday Party',
							start: new Date(y, m, d+1, 19, 0),
							end: new Date(y, m, d+1, 22, 30),
							allDay: false
						},
						{
							title: 'Click for Google',
							start: new Date(y, m, 28),
							end: new Date(y, m, 29),
							url: 'http://google.com/'
						}
					]
				}
			]
		});
	});


	function hyperJump() {console.log('hyperJump');
		$('#calendar').fullCalendar('changeView', 'agendaWeek');
		//alert('pause');
		$('#calendar').fullCalendar('gotoDate', new Date(y, m+2, d));
	}

</script>
</head>
<body style='font-size:14px'>
<button onclick='hyperJump()'>changeView+gotoDate</button>
<div id='calendar' style='width:75%;margin:20px auto 0;font-family:arial'></div>
</body>
</html>
